<template>
  <!-- 观众分析 -->
  <div class="box">
    <template v-if="isshow">
      <div class="portrait">
        <div class="title titone">观众性别分布</div>
        <div class="second_hua" v-if="genderRate.length && (genderRate[0].value || genderRate[1].value)">
          <GenderSpread :pieData="genderRate"/>
        </div>
        <!-- 暂无列表数据 -->
        <div class="zanwu" v-else>
          <img src="@/assets/three/noData.png" alt />
          <p class="zw">暂无数据</p>
        </div>
      </div>
      <div class="portrait">
        <div class="title ageTime">观众年龄分布</div>
        <div class="second_echart" v-if="ageRate.length">
          <BarChart :pieData="ageRate" pieName="粉丝年龄分布" />
        </div>
        <div class="zanwu" v-else>
          <img src="@/assets/three/noData.png" alt />
          <p class="zw">暂无数据</p>
        </div>
      </div>
      <div class="region">
        <p class="title">观众地域分布</p>
        <div class="chart1">
          <SideBarChart v-if="starRate && starRate.length" :pieData="starRate" pieName="观众地域占比" />
          <!-- 暂无列表数据 -->
          <div class="zanwu" v-if="!starRate">
            <img src="@/assets/three/noData.png" alt />
            <p class="zw">暂无数据</p>
          </div>
        </div>
      </div>
    </template>
    <noPower v-else />
  </div>
</template>
<script>
import GenderSpread from '@/component/GenderSpread.vue';
import BarChart from '@/component/BarChart.vue';
import SideBarChart from '@/component/SideBarChart.vue';
export default {
  components: { GenderSpread, BarChart, SideBarChart },
  data() {
    return {
      ageRate: [],
      genderRate: [],
      starRate: [],
      loading: false,
      isshow: true
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.GetAudienceAnalysis();
  },
  methods: {
    // 获取观众分析
    GetAudienceAnalysis() {
      this.loading = true;
      this.$axios
        .get('/api/aweme/persons?api-version=2', {
          params: {
            awemeId: this.$route.query.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            this.ageRate = res.data.data.age_chart; // 年纪分布
            this.genderRate = res.data.data.gender_chart; // 男女占比
            this.starRate = res.data.data.province_chart; // 地域分布
            let num = this.starRate.map(element => {
              return element.value;
            });
            let j = eval(num.join('+'));
            this.starRate.forEach(element => {
              element.value = ((element.value / j) * 100).toFixed(2);
            });
          }
          if (res.data.code == 1003) {
            this.isshow = false;
          }
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  width: 9.2rem;
  margin: 0 auto;
  padding-bottom: 0.66rem;
  box-sizing: border-box;
}
.titone {
  margin-top: 0.6933rem;
}
.title {
  position: relative;
  font-size: 0.4rem;
  color: #222;
  font-weight: 600;
  padding-left: 0.2rem;
  &.ageTime{
    margin-top: .3rem;
  }
}
.title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 0.08rem;
  height: 0.3733rem;
  background-color: #fd7f2c;
  border-radius: 0.1333rem;
}
.second_hua {
  width: 100%;
  height: 1.26rem;
  padding-top: 0.2rem;
  margin-top: 0.2rem;
}
.second_echart {
  width: 100%;
  height: 4.4533rem;
}
.chart1 {
  margin-top: 0.533333rem;
  height: 6.666rem;
  width: 100%;
}
//
//   暂无数据
.zanwu {
  width: 5.3333rem;
  height: 4rem;
  margin: 1rem auto 0 auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
</style>
